<template>
  <div>
    <p>{{ state?.name  }}</p>
    <p>{{ state?.age }}</p>
    <p>{{ name }}</p>
    <p>{{ age }}</p>

    <button @click="add">按钮</button>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
const state = reactive({
  name: 'zs',
  age: 18
})

// 解构后会丢失响应式
// const { name, age } = state
const { name, age } = toRefs(state)

const add = () => {
  state.name = 'ls'
}
</script>

<style lang="scss" scoped>

</style>